

<template>
<div>
  <van-nav-bar
      title="确认账单"
      left-arrow
      @click-left="onClickLeft"
  />



  <div>
    <h2><span style="font-size: 28px"><span style="font-size: 20px;color: red">￥</span>{{money}}</span><br></h2>
    <span style="color: gray">行程产生的高速、路桥、停车费全部给车主</span>
  </div>


  <van-form v-model="form" @submit="onSubmit">

    <van-field v-model="form.highwayFee" type="digit" label="高速费" style="line-height: 80px;height: 80px" />
    <van-field v-model="form.bridgeFee" type="digit" label="路桥费" style="line-height: 80px;height: 80px"  />
    <van-field v-model="form.parkingFee" type="digit" label="停车费" style="line-height: 80px;height: 80px" />
    <van-field v-model="form.additionalFee" type="digit" label="附加费" style="line-height: 80px;height: 80px" />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</div>
</template>
<script>
import {billsOfCharge, getOrderCost} from "@/components/api/homepage/homePage";
export default {
  data() {
    return {
      form:{},
      // 高速费
      highwayFee:null,
      // 路桥费
      bridgeFee:null,
      // 停车费
      parkingFee:null,
      // 附加费
      additionalFee:null,
      // 司机订单费用
      money:null,
      // 总公里数
      driverLong:null,
    };
  },
  created() {
    if(this.$route.query.orderId){
      this.form.orderId=this.$route.query.orderId;
      this.driverLong=this.$route.query.driverLong;
    }
    this.getMoney();

  },
  methods: {
    getMoney(){
      getOrderCost(this.form.orderId).then(res=>{
        this.money=res.orderCost.orderMoney
      })
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(){
      billsOfCharge(this.form).then(res=>{
        console.log(res)
          this.routePush();
      })
    },
    routePush(){
      this.$router.push({
        path: '/EndOrder',
        query: {
          orderId: this.form.orderId,
          driverLong:this.driverLong
        }
      })
    },
  }
}
</script>
<style scoped>

</style>
